<template>
  <div>
    <van-nav-bar
      title="公共设施预约"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      safe-area-inset-top
    />
    <van-dropdown-menu>
      <van-dropdown-item v-model="serchtype" :options="option" />
      <van-dropdown-item title="筛选" ref="item">
        <van-search
          v-model="select_word"
          shape="round"
          background="#4fc08d"
          placeholder="请输入筛选关键词"
        />
      </van-dropdown-item>
    </van-dropdown-menu>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.pid"
          value="预约"
          label="item.city + item.location + item.room"
          clickable="true"
          @click="enterorder(item.pid)"
        >
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{ getPublicType(item.type) }}</span>
            <van-tag :type="gettagtype(item.state)">{{
              getPublicstate(item.state)
            }}</van-tag>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serchtype: 20,
      option: [
        { text: "全部", value: 20 },
        { text: "健身房", value: 0 },
        { text: "图书馆", value: 1 },
        { text: "影视房", value: 2 },
        { text: "篮球场", value: 3 },
        { text: "乒乓球室", value: 4 },
        { text: "台球室", value: 5 },
      ],
      select_word: "",
      list: [],
      tmplist: [],
      loading: false,
      finished: false,
    };
  },

  watch: {
    serchtype: function () {
      if (this.select_word === "" && this.serchtype == 20) {
        this.list = this.tmplist;
      } else if (this.select_word === "") {
        this.list = [];
        for (let item of this.tmplist) {
          if (item.type == this.serchtype) {
            this.list.push(item);
          }
        }
      } else {
        this.list = [];
        let cl = "";
        for (let item of this.tmplist) {
          cl = item.city + item.location + item.room;
          if (
            cl.includes(this.select_word) &&
            (this.serchtype == 20 || item.type == this.serchtype)
          ) {
            this.list.push(item);
          }
        }
      }
    },
    select_word: function () {
      if (this.select_word === "" && this.serchtype == 20) {
        this.list = this.tmplist;
      } else if (this.select_word === "") {
        this.list = [];
        for (let item of this.tmplist) {
          if (item.type == this.serchtype) {
            this.list.push(item);
          }
        }
      } else {
        this.list = [];
        let cl = "";
        for (let item of this.tmplist) {
          cl = item.city + item.location + item.room;
          if (
            cl.includes(this.select_word) &&
            (this.serchtype == 20 || item.type == this.serchtype)
          ) {
            this.list.push(item);
          }
        }
      }
    },
  },

  computed: {},

  mounted() {},

  methods: {
    onClickLeft() {
      this.$router.replace("/home");
    },
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.HttpManager.publicroom_insert(sessionStorage.getItem("userid"))
        .then((res) => {
          if (res.code != 0) this.$notify({ type: "danger", message: res.msg });
          else {
            this.list = res.data;
            this.tmplist = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
          this.$router.replace("/");
        });

      // 加载状态结束
      this.loading = false;

      // 数据全部加载完成
      // this.finished = true;
      //TODO
    },
    getPublicType(type) {
      if (type == "0") return "健身房";
      else if (type == "1") return "图书馆";
      else if (type == "2") return "影视房";
      else if (type == "3") return "篮球场";
      else if (type == "4") return "乒乓球室";
      else if (type == "5") return "台球室";
      else return "未知";
    },
    getPublicstate(value) {
      if (value == "0") return "使用中";
      else if (value == "1") return "不可用";
      else if (value == "2") return "维护中";
      else return "error";
    },
    gettagtype(value) {
      if (value == "0") return "success";
      else if (value == "1") return "danger";
      else if (value == "2") return "warning";
      else return "danger";
    },
    enterorder(pid) {
      sessionStorage.setItem("nowpid", pid);
      this.$router.replace("/orderpublic");
    },
  },
};
</script>
<style scoped>
</style>
